<app-log-out></app-log-out>
<nz-layout class="main-layout">
  <nz-sider
    class="custom-sider"
    [nzTheme]="'light'"
    [nzTrigger]="null"
  >
    <div class="sider-header">
      <a nz-icon nzType="book" nzTheme="outline"></a>
      <span class="sider-title">章节索引</span>
    </div>

    <nz-list class="index-list" [nzDataSource]="siderIndexList" [nzRenderItem]="indexItem">
      <ng-template #indexItem let-index>
        <nz-list-item
          class="index-item"
          [class.active]="activeIndexId === index.id"
          (click)="scrollToSection(index.id)"
        >
          <!-- 当前选中时显示 -->
          <span *ngIf="activeIndexId === index.id" style="color:cornflowerblue">
            {{ index.name }}
          </span>

          <!-- 未选中时的索引项 -->
          <span *ngIf="activeIndexId !== index.id">
            {{ index.name }}
          </span>
        </nz-list-item>
      </ng-template>
    </nz-list>
  </nz-sider>

  <nz-content class="content-main" #contentMain>
    <div class="text-title">
      <h1>第一章  行列式</h1>
    </div>

    <section id="section1" class="content-section">
      <p class="text-subtitle">行列式的定义与性质</p>
      <p class="text-subsubtitle">一、行列式的本质定义(本质定义)</p>
      <p class="text-content">
        &nbsp;&nbsp;&nbsp;&nbsp;如果从“纯粹”的代数学角度来定义行列式的, 较为抽象, 难于理解和接受。我们先详细通俗地给出行列式的本质定义,
        并且告诉你, 我们将要开始的线性代数这门课程到底要学什么。<br>
        &nbsp;&nbsp;&nbsp;&nbsp;首先先看一个例子：
        <app-formula formulaId="determinant-2x2"></app-formula>
        其中a,的第一个下标i 表示此元素所在的行数, 第二个下标j表示此元素所在的列数, i=1,2,j=1,2,于是此行列式中有四个元素, 并且
        <app-formula formulaId="determinant-2x2-equal" [displayMode]="true"></app-formula>
      </p>
      <p class="text-question">这是一个什么样的计算规则?它背后有什么样的意义? </p>
      <p class="text-answer">
        将此行列式的第1行的两个元素<app-formula formulaString="a_{11}, a_{12}"></app-formula>看成一个2维向量
        <app-formula formulaString="\left[a_{11}, a_{12}\right] \stackrel{\text{记}}{=} \mathbf{a}_1"></app-formula>
        （线性代数中, 向量不需要在字母上加箭头写成<app-formula formulaString="\vec{a}"></app-formula>, 只要写<app-formula formulaString="\mathbf{a}_1"></app-formula>
        即可, 此后同类, 不再重复）。将此行列式的第2行的两个元素<app-formula formulaString="a_{21}, a_{22}"></app-formula>看成另一个2维向量<app-formula formulaString="\left[a_{21}, a_{22}\right] \stackrel{\text{记}}{=} \mathbf{a}_2"></app-formula>。
        不失一般性, 将这两个向量标在直角坐标系中, 且以这两个向量为邻边作出一个平行四边形<app-formula formulaString="OABC"></app-formula>, 则<app-formula formulaId="square-OABC"></app-formula>。<br>你可以试着输入向量：
      </p>
      <div nz-row>
        <div nz-col nzSpan="12" class="text-content">
          <p style="text-align: center">&nbsp;&nbsp;&nbsp;&nbsp;由你来定义你的行列式<app-formula formulaId="determinant-text"></app-formula>吧&nbsp;<i nz-icon nzType="smile"></i></p>
          <!-- 行列式输入区域 -->
          <div class="determinant-input-container" >
            <p class="input-hint">请输入二阶行列式的四个元素：</p>
            <div class="determinant-grid" style="align-content: center">
              <!-- 第一行：A 和 B -->
              <div class="input-group">
                <label for="input-A">A:</label>
                <input type="number" id="input-A" [(ngModel)]="vector.a" (ngModelChange)="initSquare('square',vector)" class="det-input" step="any">
              </div>
              <div class="input-group">
                <label for="input-B">B:</label>
                <input type="number" id="input-B" [(ngModel)]="vector.b" (ngModelChange)="initSquare('square',vector)" class="det-input" step="any">
              </div>
              <!-- 第二行：C 和 D -->
              <div class="input-group">
                <label for="input-C">C:</label>
                <input type="number" id="input-C" [(ngModel)]="vector.c" (ngModelChange)="initSquare('square',vector)" class="det-input" step="any">
              </div>
              <div class="input-group">
                <label for="input-D">D:</label>
                <input type="number" id="input-D" [(ngModel)]="vector.d" (ngModelChange)="initSquare('square',vector)" class="det-input" step="any">
              </div>
            </div>
          </div>
        </div>
        <div nz-col nzSpan="12" id="square" class="my-echarts"></div>
      </div>
      <p class="text-question">看看从原点出发的是哪辆条向量, 它们的值有什么特点？
        <i nz-icon nzType="bulb" nzTheme="fill" style="color: rgba(232,215,56,0.78);cursor: pointer" (click)="answerOneVisible = !answerOneVisible"></i></p>
      <p *ngIf="answerOneVisible" class="text-answer">是不是
        <app-formula formulaString="\overrightarrow{AC}"></app-formula>和<app-formula formulaString="\overrightarrow{BD}"></app-formula>呀</p>
      <p class="text-question">
        <label for="input-D">请输入此行列式的值:&nbsp;&nbsp;</label>
        <input nz-input type="number" style="width: 20%" [(ngModel)]="answerTwo"/>
        <button class="submit-btn" style="width: 10%; margin-left: 5%;font-size: 12px;" (click)="checkAnswerTwo()">Check It Out!</button>
      </p>
      <p class="text-content">
        &nbsp;&nbsp;&nbsp;&nbsp;了解了二阶行列式的本质之后, 你觉得三阶行列式的含义是什么呢？如此这般, 四阶, 五阶……你能说出含义吗？
      </p>
      <p class="text-subsubtitle">二、行列式的性质</p>
      <p class="text-content">&nbsp;&nbsp;&nbsp;&nbsp;既然知道行列式的几何意义了, 那行列式又有什么性质呢？</p>
      <p class="text-content">
        &nbsp;&nbsp;&nbsp;&nbsp;<i nz-icon nzType="exclamation" style="color: red"></i>性质一：行列交换, 其值不变<app-formula formulaString="\det(A) = \det(A^\top)"></app-formula>,其中
        <app-formula formulaId="determinant-text"></app-formula>,则<app-formula formulaId="determinant-converse"></app-formula>
      </p>
      <p class="text-content">
        &nbsp;&nbsp;&nbsp;&nbsp;<i nz-icon nzType="exclamation" style="color: red"></i>性质二：若某行或者某列全为0, 则该行列式的值全为0
      </p>
      <p class="text-content">
        &nbsp;&nbsp;&nbsp;&nbsp;<i nz-icon nzType="exclamation" style="color: red"></i>性质三：若行列式中某行(列)元素有公因子k(k≠0), 则k可提到行列式外面, 即   <app-formula formulaId="character-3"></app-formula>
      </p>
      <p class="text-content">
        &nbsp;&nbsp;&nbsp;&nbsp;<i nz-icon nzType="exclamation" style="color: red"></i>性质四：行列式中某行(列)元素均是两个数之和, 则可拆成两个行列式之和, 即 <app-formula formulaId="character-4" [displayMode]="true"></app-formula>
      </p>
      <p class="text-content">
        &nbsp;&nbsp;&nbsp;&nbsp;<i nz-icon nzType="exclamation" style="color: red"></i>性质五：行列式中两行(列)互换, 行列式变号, 即<app-formula formulaId="character-5"></app-formula>
      </p>
      <p class="text-content">
        &nbsp;&nbsp;&nbsp;&nbsp;<i nz-icon nzType="exclamation" style="color: red"></i>性质六：行列式中的两行(列)元素相等或对应成比例, 则行列式为零
      </p>
      <p class="text-subsubtitle">行列式的逆序数法定义(第二种定义)</p>
      <div class="text-content">
        <p>&nbsp;&nbsp;&nbsp;&nbsp;在了解第二种定义之前, 我们先学习几个定义</p>
        <p>&nbsp;&nbsp;&nbsp;&nbsp;<i nz-icon nzType="exclamation" style="color: red"></i>排列:由n个数1,2, … ,n组成的一个有序数组称为一个n级排列, 如23145是一个5级排列, 41352也是一个5级排列。n级排列共有n!个 </p>
        <p>&nbsp;&nbsp;&nbsp;&nbsp;<i nz-icon nzType="exclamation" style="color: red"></i>逆序:在一个n级排列<app-formula formulaString="i_{1}i_{2}…i_{s}…i_{t}…i_{n}, 若i_{s}>i_{s}, 且i_{s}排在i_{t}前"></app-formula>中, 则称这两个数为逆序
        </p>
        <p>&nbsp;&nbsp;&nbsp;&nbsp;<i nz-icon nzType="exclamation" style="color: red"></i>逆序对:排列的逆序的总数。</p>
        <p>&nbsp;&nbsp;&nbsp;&nbsp;那n阶行列式(n>=2)的定义为<app-formula formulaId="determinant-definition-2" [displayMode]="true"></app-formula></p>
      </div>
      <div class="text-content">
        <p class="text-subsubtitle">行列式的展开定理(第三种定义)</p>
        <p>&nbsp;&nbsp;&nbsp;&nbsp;首先你需要了解相当重要的概念——<span class="text-emphasis">余子式</span></p>
        <p>&nbsp;&nbsp;&nbsp;&nbsp;在 n 阶行列式中, 去掉元素a, 所在的第i行、第j列元素, 由剩下的元素按原来的位置与顺序组成的n-1阶行列式称为元素a,的余子式, 记作<app-formula formulaString="M_{ij}"></app-formula>, 即
          <app-formula formulaId="minor-definition" [displayMode]="true"></app-formula>
        </p>
        <p>&nbsp;&nbsp;&nbsp;&nbsp;有了余子式, <span class="text-emphasis">代数余子式</span>也是必不可少的：<app-formula formulaString="A_{i,j} = (-1)^{i+j} * M_{i,j}"></app-formula>
        </p>
        <p>&nbsp;&nbsp;&nbsp;&nbsp;
          好了, 有了余子式与代数余子式的基础, 接下来就可以介绍行列式的展开定理：<app-formula formulaId="determinant-expansion" [displayMode]="true"></app-formula>
        </p>
        <p class="text-question">为什么会有展开式呢？这个有什么好处吗？
          <i nz-icon nzType="bulb" nzTheme="fill" style="color: rgba(232,215,56,0.78);cursor: pointer" (click)="answerThreeVisible = !answerThreeVisible"></i>
        </p>
        <p *ngIf="answerThreeVisible" class="text-answer">发现没？等号右边的行列式变小了, 是不是更好计算了？</p>
        <p class="text-note">不知道你对行列式的定义有了一定的了解没？请一定要记住行列式的定义, 这很important！<i nz-icon nzType="smile"></i></p>
      </div>
      <div class="text-content">
        <p class="text-subsubtitle">几个重要的行列式</p>
        <p class="text-content-bold">一、主对角线行列式<app-formula formulaId="triangular-equal" [displayMode]="true"></app-formula></p>
        <p class="text-content-bold">二、副对角线行列式<app-formula formulaId="vice-triangular-equal" [displayMode]="true"></app-formula></p>
        <p class="text-content-bold">三、拉普拉斯展开式<app-formula formulaId="laplace-expansion" [displayMode]="true"></app-formula></p>
        <p class="text-content-bold">四、范德蒙展开式<app-formula formulaId="vandermonde" [displayMode]="true"></app-formula></p>
        <p class="text-question">你能巧借行列式的定义与性质推导这些重要行列式吗？牢记这些重点, 接下来会很有用！</p>
      </div>
    </section>
    <section id="section2" class="content-section">
      <p class="text-subtitle">行列式的计算</p>
      <div class="text-content">
        <p class="text-subsubtitle">一、具体型</p>
        <p>&nbsp;&nbsp;&nbsp;&nbsp;(1)化为基本型, 将行列式通过性质进行转换, 转换出基本类型<app-formula formulaId="determinant-calculation-1" [displayMode]="true"></app-formula></p>
        <p>&nbsp;&nbsp;&nbsp;&nbsp;(2)递推法, 建立<app-formula formulaString="D_{n}与D_{n-1}"></app-formula>的关系<app-formula formulaId="determinant-calculation-1" [displayMode]="true"></app-formula></p>
      </div>
      <div class="text-content">
        <p class="text-subsubtitle">二、抽象型</p>
        <p>&nbsp;&nbsp;&nbsp;&nbsp;巧用公式&nbsp;&nbsp;<app-formula formulaId="determinant-calculation-2"></app-formula></p>
      </div>
    </section>
    <section id="section3" class="content-section">
      <p class="text-subtitle">余子式和代数余子式的线性组合的计算</p>
      <div class="text-content">
        <app-formula formulaId="determinant-calculation-4" [displayMode]="true"></app-formula>
        <p>&nbsp;&nbsp;&nbsp;&nbsp;其中*处表示元素不变, ①,②的区别仅仅在于第i行的元素<app-formula formulaString="a_{i1},a_{i2},…,a_{in}"></app-formula>换成了
          <app-formula formulaString="k_{1},k_{2},…,k_{n}"></app-formula>
          这样, 给出不同的系数<app-formula formulaString="k_{1},k_{2},…,k_{n}"></app-formula>,即得到了不同的行列式.而若要求
          <app-formula formulaString="k_{1}M_{i1},k_{2}M_{i2},…,k_{n}M_{i2}"></app-formula>只需用<app-formula formulaString="{ij}=(-1)^{i+j}A_{ij}"></app-formula>
          化为关于<app-formula formulaString="A_{ij}"></app-formula>的线性组合即可。
        </p>
      </div>
    </section>
    <section id="section4" class="content-section">
      <p class="text-subtitle">克拉默法则</p>
      <div class="text-content">
        <p>
          对<span class="text-content-bold">n个方程n个未知数</span>的非齐次线性方程组
          <i
            nz-icon
            nzType="question-circle"
            nz-tooltip
            nzTooltipTitle="指自由项b1,b2等不全为0的线性方程组"
            nzTooltipPlacement="top"
            class="ant-scroll-number-custom-component"
            style="color: #f5222d; margin-left: 0; cursor: pointer;"
          ></i><app-formula formulaId="linear-system"></app-formula>, 若系数行列式<app-formula formulaId="determinant-nonzero"></app-formula>,则
          <app-formula formulaId="cramers-rule" [displayMode]="true"></app-formula>
          式中, <app-formula formulaString="D_{i}"></app-formula>是由常数项<app-formula formulaString="b_{1},b_{2}…b_{n}"></app-formula>替换D中第i列元素得到的行列式

        </p>
      </div>
    </section>
  </nz-content>
</nz-layout>
